<template>
  <!-- 作息管理 -->
  <div class="container-workRest">
    <!-- 多选列表 -->
    <el-form :inline="true" :model="formScreen" class="demo-form-inline">
      <el-form-item class="change_time">
        <el-date-picker
          v-model="formScreen.dateVal"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formScreen.class" placeholder="选择班级">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template v-if="state">
          <el-button @click="setting">编辑</el-button>
        </template>
        <template v-else>
          <el-button @click="save">保存</el-button>
        </template>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="timetableTimeStep" label="休息时段" width="300">
      </el-table-column>
      <el-table-column prop="gradeName" label="使用年级" width="300">
      </el-table-column>
      <el-table-column prop="timetableTime" label="作息时间">
        <template slot-scope="scope">
          <span v-if="state">{{ scope.row.timetableTime }}</span>
          <el-time-picker
            v-else
            is-range
            v-model="scope.row.timetableTime"
            range-separator="~"
            placeholder="选择时间范围"
            @change="changeTime"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </template>
      </el-table-column>
    </el-table>
    <!-- <table cellspacing="0" style="width:1468px" :data="tableData">
        <thead>
            <tr>
                <th>休息时段</th>
                <th>使用年级</th>
                <th>作息时间</th>
            </tr>
        </thead>
        <tbody slot-scope="scope">
          <tr>
              <td>{{scope.row.timetableTimeStep}}</td>
              <td>{{scope.row.gradeName}}</td>
              <td>
                  <template v-if="state">
                      {{scope.row.timetableTime}}
                  </template>
                  <template v-else>
                      <el-time-picker
                        is-range
                        v-model="value1"
                        range-separator="~"
                        placeholder="选择时间范围">
                      </el-time-picker>
                  </template>
              </td>
          </tr>
          <tr>
              <td>{{scope.row.timetableTimeStep}}</td>
              <td>{{scope.row.gradeName}}</td>
              <td>
                  <template v-if="state">
                      {{scope.row.timetableTime}}
                  </template>
                  <template v-else>
                      <el-time-picker
                        is-range
                        v-model="value1"
                        range-separator="~"
                        placeholder="选择时间范围">
                      </el-time-picker>
                  </template>
              </td>
          </tr>
          <tr>
              <td>{{scope.row.timetableTimeStep}}</td>
              <td>{{scope.row.gradeName}}</td>
              <td>
                  <template v-if="state">
                      {{scope.row.timetableTime}}
                  </template>
                  <template v-else>
                      <el-time-picker
                        is-range
                        v-model="value1"
                        range-separator="~"
                        placeholder="选择时间范围">
                      </el-time-picker>
                  </template>
              </td>
          </tr>
          <tr>
              <td>{{scope.row.timetableTimeStep}}</td>
              <td>{{scope.row.gradeName}}</td>
              <td>
                  <template v-if="state">
                      {{scope.row.timetableTime}}
                  </template>
                  <template v-else>
                      <el-time-picker
                        is-range
                        v-model="value1"
                        range-separator="~"
                        placeholder="选择时间范围">
                      </el-time-picker>
                  </template>
              </td>
          </tr>
        </tbody>
    </table> -->
  </div>
</template>

<script>
import { timeTable } from '@/api/index'
export default {
  data() {
    return {
      // 列表
      tableData: [],
      // tableData: [
      //   {
      //     timetableTimeStep: '早上起床',
      //     gradeName: '一年级',
      //     timetableTime: 'dasdsa'
      //   }, {
      //     timetableTimeStep: '早上起床',
      //     gradeName: '一年级',
      //     timetableTime: 'qewqewq'
      //   }, {
      //     timetableTimeStep: '早上起床',
      //     gradeName: '一年级',
      //     timetableTime: 'fhggh'
      //   }, {
      //     timetableTimeStep: '早上起床',
      //     gradeName: '一年级',
      //     timetableTime: 'etrret'
      //   },
      // ],
      formScreen: {
        // 日期
        dateVal: '',
        // 年级
        class: ''
      },
      // 编辑状态
      state: true,
      // 每页多少条
      pageSize: 8,
      offset: 0,
      // timetableTime: ''
    }
  },
  created() {
    this.getRestTimetable()
  },
  methods: {
    setting() {
      this.state = false
    },
    save() {
      this.$confirm('是否保存更改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
        this.state = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        });
      });
    },
    async getRestTimetable() {
      const res = await timeTable({
        "sort": true,
        "offset": this.offset,
        "pageSize": this.pageSize,
        "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
      })
      console.log(res);
      this.tableData = res.data.rows
      // if (res.status === 200) {
      //   this.tableData = res.data.rows
      //   this.total = res.data.total
      //   this.loading = false
      // }
      // this.$http({
      //   url: this.$http.adornUrl('queryPageTimetable'),
      //   method: 'POST',
      //   data: {
      //     "sort": true,
      //     "offset": 0,
      //     "pageSize": 10,
      //     "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
      //   }
      // }).then(res => {
      //   console.log('作息管理-列表', res);
      //   // this.tableData = res.data.rows
      //   // this.total = res.data.total
      // })
    },
    // 修改时间
    changeTime(isTime) {
      console.log(isTime);
    }
  }
}
</script>

<style lang='scss' scoped>
.el-button {
  padding: 0;
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-workRest {
  background-color: #fff;
  padding: 0.1667rem 0.1406rem;
  border-radius: 0.0781rem;
  table {
    thead {
      tr {
        background: #add3d1;
        height: 0.4167rem;
        border-radius: 0.0781rem;
        font-size: 0.0938rem;
        color: #ffffff;
        line-height: 0.1302rem;
        th {
          background: #add3d1;
        }
        th:nth-child(1) {
          width: 1.5625rem;
          text-align: inherit;
          padding-left: 0.1042rem;
          border-top-left-radius: 0.0781rem;
          border-bottom-left-radius: 0.0781rem;
          font-weight: 500;
        }
        th:nth-child(2) {
          width: 2.0833rem;
          text-align: inherit;
          padding-left: 0.1042rem;
          font-weight: 500;
        }
        th:nth-child(3) {
          text-align: inherit;
          padding-left: 0.1042rem;
          border-top-right-radius: 0.0781rem;
          border-bottom-right-radius: 0.0781rem;
          font-weight: 500;
        }
      }
    }
    tbody {
      tr {
        height: 0.4167rem;
        line-height: 0.4167rem;
        font-size: 0.0729rem;
        font-weight: 400;
        color: #888888;
        line-height: 0.1042rem;
        td {
          padding-left: 0.1042rem;
        }
      }
    }
  }

  .change_time {
    /deep/.el-select > .el-input--medium > .el-input__inner,
    /deep/.el-input .el-input__count .el-input__count-inner,
    /deep/.el-date-editor,
    /deep/.el-date-editor .el-input__inner {
      background-color: #f7fbfc;
      line-height: 0.2188rem;
      width: 0.9396rem !important;
      height: 0.2188rem;
      border-radius: 0.0521rem;
    }
  }
  .el-form {
    position: relative;
    /deep/.el-input__prefix {
      display: none;
    }
    /deep/.el-select > .el-input--medium > .el-input__inner,
    /deep/.el-input .el-input__count .el-input__count-inner,
    /deep/.el-date-editor,
    /deep/.el-date-editor .el-input__inner {
      background-color: #f7fbfc;
      line-height: 0.2188rem;
      width: 0.7396rem;
      height: 0.2188rem;
      border-radius: 0.0521rem;
    }
    .el-form-item:last-child {
      position: absolute;
      right: 0;
      .el-button {
        width: 0.7396rem;
        height: 0.2188rem;
        background: #0fdd8d;
        border-radius: 0.0521rem;
        font-size: 0.0833rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 0.1146rem;
      }
    }
    /deep/.el-input--medium .el-input__icon {
      line-height: 0.2344rem;
    }
  }
}
</style>